window.onload = function () {
    let p1 = new Ping();
    let oImg = document.querySelector("#img");
    let oUl = document.querySelector("#ul");
    let oP = document.querySelector("#click");
    let oDiv = document.querySelector("#con");
    oImg.style.width = oUl.offsetWidth - 8 + "px";
    oImg.style.height = oUl.offsetHeight - 8 + "px";
    oImg.style.top = oUl.offsetTop + 4 + "px";
    oImg.style.left = oUl.offsetLeft + 4 + "px";
    oImg.style.margin = 0;
    oP.onclick = function () {
        this.style.display = "none";
        oImg.style.opacity = 0;
        setTimeout(function () {
            oDiv.style.width = "100%";
            oDiv.style.height = "100%";
            oImg.style.display = 'none';
            p1.init("ul", 3)
        }, 300)
    }
}


function Ping() {
    this.oUl = null;
    this.aLi = null;
    this.len = 0;
    this.oLi = null;
    this.num = 0;
    this.zIndex = 2;
    this.arr = [];
    this.bu = 0;
    this.oP = null;
}


Ping.prototype.init = function (id, num) {

    this.oUl = document.querySelector(id);
    this.oUl.innerHTML = this.sheng(num);
    this.aLi = this.oUl.querySelectorAll("li");
    this.len = this.aLi.length;
    this.num = num;
    this.oP = document.querySelector("#lian");
    this.oLi = this.aLi[this.len - 1];
    this.oLi.className = 'active';
    this.ding();
    this.click();
}


//检测是否过关（每点击一次都要检测）
Ping.prototype.he = function () {
    let arr1 = [];
    let arr2 = [];
    let n = 0;
    for (let i = 0; i < this.len; i++) {
        arr1.push(this.aLi[i].index);
        arr2.push(this.arr[i][2])
    }
    for (let i = 0; i < this.len; i++) {
        this.aLi[i].style.color = "white";
        this.aLi[i].style.textShadow = "1px 1px 1px #000";
        if (arr1[i] == arr2[i]) {
            n += 1
        }
    }
    let c = 0;
    for (let i = 0; i < this.len; i++) {
        c++;
        if (arr1[i] != arr2[i]) {
            i = this.len - 1
        }
    }
    this.aLi[c - 1].style.color = "yellow";
    this.aLi[c - 1].style.textShadow = "1px 1px 1px #fff";
    if (this.aLi[c]) {
        this.aLi[c].style.color = "yellowgreen";
        this.aLi[c].style.textShadow = "1px 1px 1px #fff"
    } c = 0;
    if (n == this.len) {
        alert("你走了" + this.bu + "步\n恭喜闯关成功了!!");
        this.num++;
        this.bu = 0;
        let This = this;
        setTimeout(function () {
            This.init("ul", This.num)
        }, 1000)
    }
    // this.bushu()
}


/**
 * this.pan(li) 判断点击的是否为空白与不与空白向邻近的，若为是，则不做处理
 */
Ping.prototype.pan = function (li) {
    let index = li.index;
    let num = this.oLi.index;
    if (num % this.num == 0) {
        if (index + this.num == num || index - this.num == num || index - 1 == num) {
            return true
        }
    }
    else if (num % this.num == this.num - 1) {
        if (index + this.num == num || index - this.num == num || index + 1 == num) {
            return true
        }
    } else {
        if (index + this.num == num || index - this.num == num || index - 1 == num || index + 1 == num) {
            return true
        }
    }
    return false
}


Ping.prototype.move = function (li) {
    // this.pan(li) 判断点击的是否为空白与不与空白向邻近的，若为是，则不做处理
    if (this.pan(li)) {
        li.style.left = this.arr[this.oLi.index][0] + "px";
        li.style.top = this.arr[this.oLi.index][1] + "px";
        this.oLi.style.left = this.arr[li.index][0] + "px";
        this.oLi.style.top = this.arr[li.index][1] + "px";
        // 交换index
        [this.oLi.index, li.index] = [li.index, this.oLi.index];
        this.he()
    }
}


Ping.prototype.click = function () {
    let This = this;
    for (let i = 0; i < this.len; i++) {
        this.aLi[i].onclick = function () {
            this.style.zIndex = This.zIndex++;
            This.move(this)
        }
    }
}


Ping.prototype.ding = function () {
    let arr1 = [];
    let arrA = [];
    for (let i = 0; i < this.len; i++) {
        arr1.push([this.aLi[i].offsetLeft, this.aLi[i].offsetTop, i]);
        arrA.push([this.aLi[i].offsetLeft, this.aLi[i].offsetTop, i])
    }
    this.arr = arrA;
    let arr2 = [];
    for (let i = 0; i < this.len - 1; i++) {
        arr2.push(arr1[i])
    }

    arr2.sort(function (a, b) {
        return Math.random() - 0.5
    });

    arr2.push(arr1[this.len - 1]);

    let arr3 = [];
    let a = 0;

    for (let i = 0; i < this.len; i++) {
        arr3.push(arr2[i][2])
    }

    for (let i = 0; i < this.len; i++) {
        let b = arr3[i];
        for (let j = i; j < this.len; j++) {
            let c = arr3[j];
            if (b > c) {
                a += 1
            }
        }
    }

    if (a % 2 == 0) {
        console.log("加油~")
    }

    else {
        console.log("你不会成功的!");
        this.ding();
        return false
    }
    arr1 = arr2;

    for (let i = 0; i < this.len; i++) {
        if (this.num >= 5) {
            this.aLi[i].innerHTML = i + 1
        }
        this.aLi[i].style.position = "absolute";
        this.aLi[i].style.left = arr1[i][0] + "px";
        this.aLi[i].style.top = arr1[i][1] + "px";
        this.aLi[i].index = arr1[i][2];
        this.aLi[i].style.margin = 0;
        this.aLi[i].style.backgroundSize = this.num * 100 + "px";
        this.aLi[i].style.backgroundPosition = (i % this.num) * -100 + "px " + ((i - (i % this.num)) / this.num) * -100 + "px"
    }
}


Ping.prototype.sheng = function (num) {
    this.oUl.style.width = 2 + num * 2 + num * 100 + "px";
    this.oUl.style.height = num * 2 + num * 100 + "px";
    let n = num * num; let str = "";
    for (let i = 0; i < n; i++) {
        str += "<li></li>"
    }
    return str
}